<template>
  <div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" readonly placeholder="请输入名称" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="文本框" prop="value">
        <Editor ref="text" v-model="formData.value" />

      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="preview">预览</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <!--        <el-button @click="resetForm">重置</el-button>-->
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="show" title="" center width="822px">
      <div class="ql-bubble">
        <div class="ql-editor" v-html="formData.value" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Editor from '../../components/Editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-clean': '清除字体样式'
}
import {
  createConfig,
  deleteConfig,
  deleteConfigByIds,
  updateConfig,
  findConfig,
  getConfigList
} from '@/api/config' //  此处请自行替换地址
export default {
  components: { Editor },
  props: [],
  data() {
    return {
      show: false,
      formData: {
        key: '',
        name: '',
        type: 0,
        value: ''
      },
      editorOption: {
        height: 500
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        value: [{
          required: true,
          message: '',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (this.$route.query.id) {
      const res = await findConfig({ ID: this.$route.query.id })
      if (res.code == 0) {
        this.formData = res.data.reconfig
        this.type = 'update'
      }
    } else {
      this.type = 'create'
    }
  },
  methods: {
    preview() {
      this.show = true
    },
    async submitForm() {
      const res = await updateConfig(this.formData)
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '更改成功'
        })
      }
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}

</script>

<style >
.ql-editor{
    min-height: 400px;
  }

  .el-dialog__body {
    padding: 12px 20px;
  }
</style>
